<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>热点新闻</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.mui-media {
				font-size: 14px;
			}
			
			.mui-table-view .mui-media-object {
				max-width: initial;
				width: 90px;
				height: 70px;
			}
			
			.meta-info {
				position: absolute;
				left: 115px;
				right: 15px;
				bottom: 8px;
				color: #8f8f94;
			}
			
			.meta-info .author,
			.meta-info .time {
				display: inline-block;
			}
			
			.meta-info .time {
				float: right;
			}
			
			.mui-table-view:before,
			.mui-table-view:after {
				height: 0;
			}
			
			.mui-content>.mui-table-view:first-child {
				margin-top: 1px;
			}
			
			.banner {
				height: 180px;
				overflow: hidden;
				position: relative;
				background-position: center;
				background-color: #ccc;
			}
			
			.banner img {
				width: 100%;
				height: auto;
			}
			
			.banner .title {
				position: absolute;
				left: 15px;
				bottom: 15px;
				width: 90%;
				font-size: 16px;
				font-weight: 400;
				line-height: 21px;
				color: white;
				z-index: 11;
			}
		</style>
	</head>

	<body style="background-color: gray;">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a>
			<h1 class="mui-title">新闻</h1>
		</header>
		<div class="mui-content" id="news">
			<!--列表信息流 开始-->
			<!--<div id="list" class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media" v-for="item in items">
							<a href="javascript:;" :data-guid="item.guid" @tap="open_detail(item)">
								<img class="mui-media-object mui-pull-left" :src="item.cover">
								<div class="mui-media-body">
									<div class="mui-ellipsis-2">{{item.title}}</div>
								</div>
								<div class="meta-info">
									<div class="author">{{item.author}}</div>
									<div class="time">{{item.time}}</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>-->
			<div id="list" class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
				        <li class="mui-table-view-cell" v-for="item in items">
				        	<a href="javascript:;" :data-guid="item.guid" @tap="open_detail(item)">
					            <div class="mui-table">
					                <div class="mui-table-cell mui-col-xs-20">
					                    <h4 class="mui-ellipsis">{{item.title}}</h4>
					                </div>
					                <div class="mui-table-cell mui-col-xs-2 mui-text-right">
					                    <span class="mui-h5">{{item.author}}</span>
					                </div>
					            </div>
					        </a>
				        </li>
				    </ul>
				</div>
			</div>
			<!--列表信息流 结束-->
		</div>

		<script src="../js/mui.min.js"></script>
		<script src="../js/common.js"></script>
		<script src="../vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var pageIndex = 1;
			var webview_detail = null; //详情页webview
			var titleNView = { //详情页原生导航配置
				backgroundColor: '#f7f7f7', //导航栏背景色
				titleText: '', //导航栏标题
				titleColor: '#000000', //文字颜色
				type: 'transparent', //透明渐变样式
				autoBackButton: true, //自动绘制返回箭头
				splitLine: { //底部分割线
					color: '#cccccc'
				}
			}
			
			//mui初始化，配置下拉刷新
			mui.init({
				pullRefresh: {
					container: '#list',
					down: {
						style: 'circle',
						offset: '0px',
						auto: true,
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			
			/**
			 *  下拉刷新获取最新列表 
			 */
			function pulldownRefresh() {
				news.items = [];
				pageIndex = 1;
				if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
					plus.nativeUI.toast('似乎已断开与互联网的连接', {
						verticalAlign: 'top'
					});
					return;
				}
				
				
				//请求最新列表信息流
				mui.getJSON('http://'+ip+':'+port+'/newsList', null, function(rsp) {
					mui('#list').pullRefresh().endPulldownToRefresh();
					news.items = convert(rsp).concat(news.items);
				});
				/*mui.getJSONP('http://192.168.1.101:3000/newsList', null, function(rsp) {
				    mui('#list').pullRefresh().endPulldownToRefresh();
					news.items = convert(rsp).concat(news.items);
				});*/
			}

			/**
			 * 上拉加载拉取历史列表 
			 */
			function pullupRefresh() {
				pageIndex = parseInt(pageIndex)+1;
				//说明已有数据，目前处于上拉加载，传递当前minId 返回历史数据
				/*if(minId) { 
					data.minId = minId;
					data.time = new Date().getTime() + "";
					data.pageSize = 10;
				}*/
				//请求历史列表信息流
				mui.getJSON('http://'+ip+':'+port+'/newsList'+pageIndex, null, function(rsp) {
					mui('#list').pullRefresh().endPullupToRefresh();
					if(rsp && rsp.length > 0) {
						news.items = news.items.concat(convert(rsp));
					}else{
						plus.nativeUI.toast('到底了...', {
						verticalAlign: 'top'
					});
					}
				});
			}

			mui.plusReady(function() {
				//预加载详情页
				webview_detail = mui.preload({
					url: './newsDetail.html',
					id: 'newsDetail',
					styles: {
						"render": "always",
						"popGesture": "hide",
						"bounce": "vertical",
						"bounceBackground": "#efeff4",
						"titleNView": titleNView
					}
				});
			});

			var news = new Vue({
				el: '#news',
				data: {
					items: [] //列表信息流数据
				}
			});

			/**
			 * 打开新闻详情
			 * 
			 * @param {Object} item 当前点击的新闻对象
			 */
			function open_detail(item) {
				//触发子窗口变更新闻详情
				mui.fire(webview_detail, 'newsDetail', {
					guid: item.guid,
					title: item.title,
					author: item.author,
					time: item.time,
					cover: item.cover
				});

				//更改详情页原生导航条信息
				titleNView.titleText = item.title;
				webview_detail.setStyle({
					"titleNView": titleNView
				});
				setTimeout(function() {
					webview_detail.show("slide-in-right", 300);
				}, 150);
			}

			/**
			 * 1、将服务端返回数据，转换成前端需要的格式
			 * 2、若服务端返回格式和前端所需格式相同，则不需要改功能
			 * 
			 * @param {Array} items 
			 */
			function convert(items) {
				var newItems = [];
				items.forEach(function(item) {
					newItems.push({
						guid: item._id,
						title: item.title,
						author: item.author_name,
						cover: item.cover,
						time: item.create_time
					});
				});
				return newItems;
			}
		</script>
		<script src="../js/sideslipNav.js"></script>
	</body>

</html>